<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>借阅历史</title>
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>
    <link rel="icon" href="images/lenthistory.png" type="img/x-ico" />
</head>

<body>

  <ul>
    <li><a class="active" href="Student.html">返回上一页</a></li>
    <li><a href="">借阅历史</a></li>
  </ul>
  <h1>你的借阅历史：</h1>
  <div class="search">
  <input type="text" id="bookName" placeholder="输入图书名称" >
  <input type="text" id="bookAuthor" placeholder="输入图书作者" >
  <input type="text" id="bookPublisher" placeholder="输入图书出版社" >
  <input type="text" id="bookType" placeholder="输入图书类型" >&nbsp;
  <input type="button" id="sure" value="查询" >
  </div>
  <div id="t">
      <table id="table" class="mytable" border="2" bgcolor="#f0f8ff"></table>
  </div>
  <div class="zhezhao" id='zhezhao'>
      <div class="tankuang">
          <div id="header">
              <h2>评分窗口</h2>
              <div id="header-right" onclick="hidder()">x</div>
              <input type="number" id="pGrade" size="30" placeholder="输入你的评分" >&nbsp;
              <input type="button" id="pingF" value="提交" >
          </div>
      </div>
  </div>
</body>

</html>

<style>
  body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    /*设置字体为sans-serif*/
    background-image: url(images/library.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;
    /*背景图片尺寸为覆盖cover*/
  }

  h1{
      text-align: center;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  li {
    float: left;
  }

  li a,
  .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
  }

  li a:hover,
  .user:hover,
  .dropdown:hover {
    background-color: #111;
    /*鼠标移动时背景颜色*/
  }

  .search {
      width: 20%;
      margin: 20px auto;
      margin-left: 420px;
      /*搜索栏的位置*/
      display: flex;
      /**/
  }

  .search input {
    float: left;
    flex: 4;
    height: 40px;
    outline: none;
    border: 1px solid white;
    box-sizing: border-box;
    padding-left: 0px;
  }

  .search button {
    float: right;
    flex: 1;
    height: 30px;
    background-color: rgb(63, 224, 245);
    color: white;
    border-style: none;
    outline: none;
  }

  .search button i {
    font-style: normal;
  }

  .search button:hover {
    font-size: 20px;
    background-color: rgb(63, 224, 245);
  }

    #sure{
             text-align: center;
             background: transparent;
             border: none;
             outline: none;
             font-size: 15px;
             color: #03a9f4;
             background: rgb(190, 221, 247);
             padding: 4px 4px;
             cursor: pointer;
             /*光标呈现为指示链接的指针（一只手）*/
             border-radius: 10px;
             position: relative;
             top: auto;
         }
  #t{
      padding-left:1%;
  }
  mytable {
      width: 500px;
      border: 2px;
      text-align: center;
      border-collapse: collapse;
      background-color: cornsilk;
      padding-left:20%;
  }

  .mytable tr {
      width: 100px;
      padding-left:15%;
  }
  #xu{
      background: transparent;
      border: none;
      outline: none;
      font-size: 15px;
      color: #03a9f4;
      background: rgb(190, 221, 247);
      margin-left: 0%;
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
      position: relative;
      top: auto;
  }
  #bt{
      background: transparent;
      border: none;
      outline: none;
      font-size: 15px;
      color: #03a9f4;
      background: rgb(190, 221, 247);
      margin-left: 0%;
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
      position: relative;
      top: auto;
  }

  #pingF{
      background: transparent;
      border: none;
      outline: none;
      font-size: 15px;
      color: #03a9f4;
      background: rgb(190, 221, 247);
      margin-left: 0%;
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
      position: relative;
      top: auto;
  }
  #ping{
      background: transparent;
      border: none;
      outline: none;
      font-size: 15px;
      color: #03a9f4;
      background: rgb(190, 221, 247);
      margin-left: 0%;
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
      position: relative;
      top: auto;
  }

  .bt{
      background: transparent;
      border: none;
      outline: none;
      font-size: 15px;
      color: #03a9f4;
      background: rgb(190, 221, 247);
      margin-left: 0%;
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
      position: relative;
      top: auto;
  }
  .zhezhao{
      position: fixed;
      left: 35%;
      top: 20%;
      background: #000;
      width: 30%;
      height: 20%;
      background: rgba(0,0,0,0.5);
  }
  .tankuang{
      position: relative;
      background: ghostwhite;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      margin: 5% auto;
  }
  #header{
      height: 40px;
      text-align: center;
  }
  #header-right{
      position: absolute;
      width: 25px;
      height: 25px;
      border-radius: 5px;
      background: red;
      color: #fff;
      right: 5px;
      top: 5px;
      text-align: center;
      cursor: pointer;
  }
</style>
<script>
    document.getElementById('zhezhao').style.display="none";
    function hidder(){
        document.getElementById('zhezhao').style.display="none";
    }

  $("#sure").click(function () {
    var findReaderHistory = {
      bookName:$("#bookName").val(),
      bookAuthor:$("#bookAuthor").val(),
      bookPublisher:$("#bookPublisher").val(),
      bookType:$("#bookType").val(),
      userId:$.cookie('student')
    }
    var html = "<tr><th>借阅单号</th><th>用户姓名</th><th>图书名称</th><th>图书作者</th><th>图书出版社</th><th>图书类别</th><th>图书id</th><th>图书借出日期</th><th>理应归还日期</th><th>实际归还日期</th><th>借阅图书状态</th><th>罚款金额</th><th>图书总评分</th><th>续借</th><th>评分</th></tr>"
    console.log(findReaderHistory.userId,findReaderHistory.bookName)
      $.ajax({
        url: "http://localhost:8080/bookware/findReaderHistory",
        type: "post",
        dataType: 'json',
        data: JSON.stringify(findReaderHistory),
        contentType: "application/json",
        success: function (res) {
                alert(res.msg)
                for(var i=0;i<res.data.length;i++){
                    if(res.data[i].realDate==null) {
                        html = html + "<tr><td>" +res.data[i].borrowId+"</td><td>" + $.cookie('userName') + "</td><td>" + res.data[i].bookName + "</td><td>" + res.data[i].bookAuthor + "</td><td>" + res.data[i].bookPublisher + "</td><td>" +
                            res.data[i].bookType + "</td><td>" + res.data[i].bookId + "</td><td>" + dateformat(res.data[i].borrowDate) + "</td><td>" + dateformat(res.data[i].shouldData) + "</td><td>" + "null"+ "</td><td>" +
                            res.data[i].borrowStatus + "</td><td>" +res.data[i].punishmentPrice+"</td><td>"+ res.data[i].bookGrade + "</td><td>" + "<button id='xu'>续借</button>" + "</td><td>" + "<button id='bt'>评分</button>" + "</td></tr>";
                    }else{
                        html = html +"<tr><td>"+res.data[i].borrowId+"</td><td>" +$.cookie('userName')+"</td><td>"+res.data[i].bookName+"</td><td>"+res.data[i].bookAuthor+"</td><td>"+res.data[i].bookPublisher+"</td><td>"+
                            res.data[i].bookType+"</td><td>"+res.data[i].bookId+"</td><td>"+dateformat(res.data[i].borrowDate)+"</td><td>"+dateformat(res.data[i].shouldData)+"</td><td>"+dateformat(res.data[i].realDate)+"</td><td>"+
                            res.data[i].borrowStatus+"</td><td>"+res.data[i].punishmentPrice+"</td><td>"+res.data[i].bookGrade+"</td><td>" +"<button id='xu'>续借</button>"+"</td><td>"+"<button id='bt'>评分</button>"+"</td></tr>";
                    }
                }
                $("#table").html(html)
        },
        error: function (res) {
          alert("JSON数据获取失败，请联系管理员！");
        }
      })
  })
  $(function () {
    $(document).off("click", "#xu").on("click", "#xu", function () {
        var borrowId = $(this).parents("tr").find("td").eq(0).html();
      $.ajax({
        url: "http://localhost:8080/borrow/renew",
        type: "post",
        dataType: 'json',
        data: borrowId,
        contentType: "application/text",
        success: function (res) {
          alert(res.msg)
            if(res.msg=="续借成功"){
                window.location.href="LentHistory.html"
            }
        },
        error: function (res) {
          alert("JSON数据获取失败，请联系管理员！");
        }
      })
    })
      $(document).on("click", "#bt", function () {
          var id = $(this).parents("tr").find("td").eq(6).html();
          document.getElementById('zhezhao').style.display = "";
          console.log("asdasdasd")
          $("#pingF").click(function () {
              var borrowGrade = {
                  bookId: id,
                  grade: $("#pGrade").val()
              }
              $.ajax({
                  url: "http://localhost:8080/bookware/grade",
                  type: "post",
                  dataType: 'json',
                  data: JSON.stringify(borrowGrade),
                  contentType: "application/json",
                  success: function (res) {
                      alert(res.msg)
                      if (res.msg == "评分成功") {
                          document.getElementById('zhezhao').style.display = "none";
                           window.location.href="LentHistory.html"
                      } else {
                          document.getElementById('zhezhao').style.display = "none";
                      }
                  },
                  error: function (res) {
                      alert("JSON数据获取失败，请联系管理员！");
                  }
              })
          })
      })
  })

  function dateformat(str){
    if(str == null || str == "" || typeof(str)=="undefined"){
      return "";
    }
    var now = new Date(str);
    var year = now.getFullYear();
    var month =(now.getMonth() + 1).toString();
    var day = (now.getDate()).toString();
    if (month.length == 1) {
      month = "0" + month;
    }
    if (day.length == 1) {
      day = "0" + day;
    }
    var dateTime = year +"-"+ month +"-"+  day;
    return dateTime;
  }
  function  shua() {
      var findReaderHistory = {
          bookName:$("#bookName").val(),
          bookAuthor:$("#bookAuthor").val(),
          bookPublisher:$("#bookPublisher").val(),
          bookType:$("#bookType").val(),
          userId:$.cookie('student')
      }
      var html = "<tr><th>借阅单号</th><th>用户姓名</th><th>图书名称</th><th>图书作者</th><th>图书出版社</th><th>图书类别</th><th>图书id</th><th>图书借出日期</th><th>理应归还日期</th><th>实际归还日期</th><th>借阅图书状态</th><th>罚款金额</th><th>图书总评分</th><th>续借</th><th>评分</th></tr>"
      $.ajax({
          url: "http://localhost:8080/bookware/findReaderHistory",
          type: "post",
          dataType: 'json',
          data: JSON.stringify(findReaderHistory),
          contentType: "application/json",
          success: function (res) {
              for(var i=0;i<res.data.length;i++){
                  if(res.data[i].realDate==null) {
                      html = html + "<tr><td>" +res.data[i].borrowId+"</td><td>" + $.cookie('userName') + "</td><td>" + res.data[i].bookName + "</td><td>" + res.data[i].bookAuthor + "</td><td>" + res.data[i].bookPublisher + "</td><td>" +
                          res.data[i].bookType + "</td><td>" + res.data[i].bookId + "</td><td>" + dateformat(res.data[i].borrowDate) + "</td><td>" + dateformat(res.data[i].shouldData) + "</td><td>" + "null"+ "</td><td>" +
                          res.data[i].borrowStatus + "</td><td>" +res.data[i].punishmentPrice+"</td><td>"+ res.data[i].bookGrade + "</td><td>" + "<button id='xu'>续借</button>" + "</td><td>" + "<button id='bt'>评分</button>" + "</td></tr>";
                  }else{
                      html = html +"<tr><td>"+res.data[i].borrowId+"</td><td>" +$.cookie('userName')+"</td><td>"+res.data[i].bookName+"</td><td>"+res.data[i].bookAuthor+"</td><td>"+res.data[i].bookPublisher+"</td><td>"+
                          res.data[i].bookType+"</td><td>"+res.data[i].bookId+"</td><td>"+dateformat(res.data[i].borrowDate)+"</td><td>"+dateformat(res.data[i].shouldData)+"</td><td>"+dateformat(res.data[i].realDate)+"</td><td>"+
                          res.data[i].borrowStatus+"</td><td>"+res.data[i].punishmentPrice+"</td><td>"+res.data[i].bookGrade+"</td><td>" +"<button id='xu'>续借</button>"+"</td><td>"+"<button id='bt'>评分</button>"+"</td></tr>";
                  }
              }
              $("#table").html(html)
          },
          error: function (res) {
              alert("JSON数据获取失败，请联系管理员！");
          }
      })
  }
  window.onload = function () {
        shua();
  }
</script>
